<!DOCTYPE html>
<!-- saved from url=(0038)https://tabler.bootmb.com/tables.html# -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- CSS files -->
    <link href="../css/tabler.min.css" rel="stylesheet">
    <link href="../css/tabler-flags.min.css" rel="stylesheet">
    <link href="../css/tabler-payments.min.css" rel="stylesheet">
    <link href="../css/tabler-vendors.min.css" rel="stylesheet">

    <!-- 仅仅CSS引用 -->
    <!--    <link href="../css/bootstrap.min.css" rel="stylesheet">-->
    <link href="../css/bootstrap-table.min.css" rel="stylesheet">
    <!-- 混合Popper的JS引用 -->
    <script src="../js/jquery-3.6.4.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body class="antialiased">
<div class="wrapper">
    <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
            <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                <a href="index.html" style="text-underline: none">
                    service-monitor
                </a>
            </h1>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item d-none d-md-flex me-3">
                    <div class="btn-list">
                        <a href="https://gitee.com/gaoganghua/service-monitor" class="btn btn-outline-white"
                           target="_blank" rel="noreferrer">
                            <img src="../img/logo.PNG" width="20" height="20"/> &nbsp;Gitee
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar navbar-light">
                <div class="container-xl">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="index.html">
                                <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                       viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                       stroke-linecap="round" stroke-linejoin="round"><path stroke="none"
                                                                                            d="M0 0h24v24H0z"
                                                                                            fill="none"></path><polyline
                                          points="5 12 3 12 12 3 21 12 19 12"></polyline><path
                                          d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path
                                          d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>
                                </span>
                                <span class="nav-link-title">
                                  机器列表
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="service-info.html">
                                <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                       viewBox="0 0 24 24"
                                       stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                                       stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline
                                          points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3"></polyline><line x1="12"
                                                                                                                y1="12"
                                                                                                                x2="20"
                                                                                                                y2="7.5"></line><line
                                          x1="12" y1="12" x2="12" y2="21"></line><line x1="12" y1="12" x2="4"
                                                                                       y2="7.5"></line><line
                                          x1="16" y1="5.25" x2="8" y2="9.75"></line></svg>
                                </span>
                                <span class="nav-link-title">
                                  服务列表
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="package.html">
                                <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                         stroke-linecap="round" stroke-linejoin="round"><path stroke="none"
                                                                                              d="M0 0h24v24H0z"
                                                                                              fill="none"></path><rect
                                            x="4" y="4" width="6" height="6" rx="1"></rect><rect x="4" y="14" width="6"
                                                                                                 height="6"
                                                                                                 rx="1"></rect><rect
                                            x="14" y="14" width="6" height="6" rx="1"></rect><line x1="14" y1="7"
                                                                                                   x2="20"
                                                                                                   y2="7"></line><line
                                            x1="17" y1="4" x2="17" y2="10"></line></svg>
                                </span>
                                <span class="nav-link-title">
                                  程序包管理
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="service-activity.html">
                                <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                       viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                       stroke-linecap="round" stroke-linejoin="round"><path stroke="none"
                                                                                            d="M0 0h24v24H0z"
                                                                                            fill="none"></path><polyline
                                          points="9 11 12 14 20 6"></polyline><path
                                          d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path></svg>
                                </span>
                                <span class="nav-link-title">
                                  上下线消息
                                </span>
                            </a>
                        </li>
                    </ul>
                    <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                        <form action="#" method="get">
                            <div class="input-icon">
                                <span class="input-icon-addon">
                                  <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                       viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                       stroke-linecap="round" stroke-linejoin="round"><path stroke="none"
                                                                                            d="M0 0h24v24H0z"
                                                                                            fill="none"></path><circle
                                          cx="10" cy="10" r="7"></circle><line x1="21" y1="21" x2="15"
                                                                               y2="15"></line></svg>
                                </span>
                                <input type="text" class="form-control" placeholder="Search…"
                                       aria-label="Search in website">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-wrapper">
        <div class="page-body">
            <div class="container-xl">
                <!-- Page title -->
                <div class="page-header d-print-none">
                    <div class="row align-items-center">
                        <!-- Page title actions -->
                        <div class="col-auto ms-auto d-print-none">
                            <div class="btn-list">
                                <a href="#" class="btn btn-secondary d-none d-sm-inline-block" data-bs-toggle="modal" id="addMachineBtn"
                                   data-bs-target="#modal-report">
                                    <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                                    <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="modal"
                                         data-bs-target="#modal-report" class="icon" width="24" height="24"
                                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                         stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <line x1="12" y1="5" x2="12" y2="19"></line>
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                    </svg>
                                    添加机器信息
                                </a>
                            </div>
                            <div class="col">
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-xl">
                <div class="row row-cards">
                    <div class="col-12">
                        <div class="card">
                            <div class="table-responsive">
                                <table id="serviceList" data-classes="table table-hover" data-striped="true"
                                       data-height="500" data-mobile-responsive="true"
                                       class="table table-vcenter card-table table-bordered, table-hover, table-striped">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal modal-blur fade" id="modal-report" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">机器信息</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label" required>IP地址</label>
                                    <input type="text" class="form-control" name="add-server-ip"
                                           placeholder="192.168.1.1">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label" required>SSH端口</label>
                                    <input type="text" class="form-control" name="add-server-port"
                                           placeholder="22">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label" required>SSH用户名</label>
                                    <input type="text" class="form-control" name="add-server-username"
                                           placeholder="root">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label" required>SSH密码</label>
                                    <input type="text" class="form-control" name="add-server-password"
                                           placeholder="root">
                                </div>
                            </div>
                        </div>
                        <label class="form-label">启动类型</label>
                        <div class="form-selectgroup-boxes row mb-3">
                            <div class="col-lg-6  type-radio" href="#tabs-home-7">
                                <label class="form-selectgroup-item">
                                    <input type="radio" name="add-server-type" value="1" class="form-selectgroup-input"
                                           checked="">
                                    <span class="form-selectgroup-label d-flex align-items-center p-3">
                                    <span class="me-3">
                                      <span class="form-selectgroup-check"></span>
                                    </span>
                                    <span class="form-selectgroup-label-content">
                                      <span class="d-block text-muted">普通方式启动</span>
                                    </span>
                                  </span>
                                </label>
                            </div>
                            <!--                            <div class="col-lg-6  type-radio" href="#tabs-profile-7">-->
                            <!--                                <label class="form-selectgroup-item">-->
                            <!--                                    <input type="radio" name="add-server-type" value="1" class="form-selectgroup-input">-->
                            <!--                                    <span class="form-selectgroup-label d-flex align-items-center p-3">-->
                            <!--                                    <span class="me-3">-->
                            <!--                                      <span class="form-selectgroup-check"></span>-->
                            <!--                                    </span>-->
                            <!--                                    <span class="form-selectgroup-label-content">-->
                            <!--                                      <span class="d-block text-muted">jenkins触发</span>-->
                            <!--                                    </span>-->
                            <!--                                  </span>-->
                            <!--                                </label>-->
                            <!--                            </div>-->
                        </div>
                        <div class="form-selectgroup-boxes row mb-3">
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="tab-pane active show" id="tabs-home-7">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label">sftp根目录</label>
                                                    <div class="input-group input-group-flat">
                                                <span class="input-group-text">
                                                </span>
                                                        <input type="text" class="form-control ps-0"
                                                               placeholder="C:\\services"
                                                               autocomplete="off" name="add-server-sftp">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label">程序包</label>
                                                    <select class="form-select" name="add-server-packagejar">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-profile-7">
                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label class="form-label">Visibility</label>
                                                <select class="form-select" name="">
                                                    <option value="1" selected="">Private</option>
                                                    <option value="2">Public</option>
                                                    <option value="3">Hidden</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" id="addServeBtn"
                           class="btn btn-secondary d-none d-sm-inline-block" data-bs-toggle="modal"
                           data-bs-target="#modal-report">
                            确定
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal modal-blur fade" id="modal-small" tabindex="-1" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div id="modal-small-body"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer footer-transparent d-print-none">

        </footer>
    </div>
</div>
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../js/tabler.min.js"></script>
<script src="../js/date.js"></script>
<script>
    var hostIP = "http://localhost:18800"
    var reloadTable = function () {
        $.post(hostIP + "/list", {}, function (data, status) {
            console.log(data);
            $('#serviceList').bootstrapTable('load', data.data);
        });
    }
    var clearForm = function () {
        $("input[name='add-server-ip']").val('');
        $("input[name='add-server-port']").val('');
        $("input[name='add-server-username']").val('');
        $("input[name='add-server-password']").val('');
        $("input[name='add-server-sftpRoot']").val('');
        $("select[name='add-server-packagejar']").val('');
    }
    var packageList = [];
    $(function () {
        var columns = [
            {
                title: '序号',
                align: "center",
                // width: 40,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            },
            {
                field: 'ip',
                title: 'ip地址',
                align: 'center',
                class: 'text-muted'
            },
            {
                field: 'port',
                title: 'ssh端口',
                align: 'center',
                class: 'text-muted'
            },
            {
                field: 'username',
                title: 'ssh用户名',
                align: 'center',
                class: 'text-muted'
            },
            {
                field: 'password',
                title: 'ssh密码',
                align: 'center',
                class: 'text-muted'
            },
            {
                field: 'sftpRoot',
                title: 'sftp根目录',
                align: 'center',
                class: 'text-muted'
            },
            {
                field: 'jarpackage',
                title: '程序包',
                align: 'center',
                class: 'text-muted'
            },
            {
                field: 'addTime',
                title: '添加时间',
                align: 'center',
                class: 'text-muted',
                formatter: function (value, row, index) {
                    return formatDate(value);
                }
            },
            {
                title: "操作",
                field: "field_operate",
                align: "center",
                events: "operateEvents",
                formatter: function (value, row, index) {//value：表示当前单元格中的值,row：表示当前行,index：表示当前行的下标
                    return [
                        '<a href="#" class="btn btn-outline-success row_start">启动</a> &nbsp' +
                        '<a href="#" class="btn btn-outline-success row_edit">编辑</a> &nbsp' +
                        '<a href="#" class="btn btn-outline-danger delServeBtn">删除</a>'
                    ].join('');
                }
            }
        ]

        var demo = [{
            "ip": "----",
            "message": null,
            "onlineTime": "-----"
        }]
        $('#serviceList').bootstrapTable({"columns": columns, "data": demo})

        // 查询机器列表
        $.post(hostIP + "/list", {}, function (data, status) {
            $('#serviceList').bootstrapTable('load', data.data);
        });

        // 查询package列表
        $.post(hostIP + "/packageList", {}, function (data, status) {
            var packageJar = $("select[name='add-server-packagejar']");
            $.each(data.data, function (index, item) {
                packageJar.append("<option value='" + item.uuid + "'>" + item.name + "</option>")
            });
        });

        $("#addMachineBtn").click(function () {
            clearForm();
        })

        // 添加机器列表
        $("#addServeBtn").click(function () {
            var serverip = $("input[name='add-server-ip']").val();
            var serverusername = $("input[name='add-server-username']").val();
            var serverpassword = $("input[name='add-server-password']").val();
            var sshPort = $("input[name='add-server-port']").val();
            var sftpRoot = $("input[name='add-server-sftp']").val();
            var packagejar = $("select[name='add-server-packagejar']").val();
            $.post("/addMachine", {
                ip: serverip,
                sshPort: sshPort,
                sftpRoot: sftpRoot,
                username: serverusername,
                password: serverpassword,
                packagejar: packagejar
            }, function (data, status) {
                $('#modal-small-body').html(data.data)
                $('#modal-small').modal('toggle')
                $("div.modal-body").find("input").val("")
                reloadTable()
            });
        })

        $("div.type-radio").click(function () {
            $("div.card-body").find("div.tab-pane").hide()
            var href = $(this).attr("href")
            $("div.card-body").find(href).show()
        })
    })

    window.operateEvents = {
        'click .delServeBtn': function (e, value, row, index) {
            var serverip = row['ip']
            $.post("/delMachine", {
                ip: serverip
            }, function (data, status) {
                $('#modal-small-body').html(data.data)
                $('#modal-small').modal('toggle')
                reloadTable()
            });
            return false;
        },
        'click .row_start': function (e, value, row, index) {
            var serverip = row['ip']
            $.post(hostIP + "/operate", {
                ip: serverip,
                type: 1
            }, function (data, status) {
                $('#modal-small-body').html(data.data)
                $('#modal-small').modal('toggle')
                reloadTable()
                e.target().disable()
            });
            return false;
        },
        'click .row_edit': function (e, value, row, index) {
            $('#modal-report').modal('toggle')
            $("input[name='add-server-ip']").val(row['ip']);
            $("input[name='add-server-port']").val(row['sshPort']);
            $("input[name='add-server-username']").val(row['username']);
            $("input[name='add-server-password']").val(row['password']);
            $("input[name='add-server-sftp']").val(row['sftpRoot']);
            $("select[name='add-server-packagejar']").val(row['packagejar']);
        }
    };
</script>

</body>
</html>
